<template>
  <div class="pledge-record">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div class="pledge-head">
        <span class="head-head">时间</span>
        <span class="head-body">数量</span>
        <span class="head-foot">状态</span>
      </div>
      <div class="pledge-body" v-for="(item, index) in list" :key="index">
        <span class="body-content1" style="width:25%">{{ item.create_time }}</span>
        <div class="body-content1">{{ item.money }} U</div>
        <div style="text-align: center;line-height: 1.8;width: 25%;">
          <div class="body-content1" >{{ item.notes || '' }}</div>
          <div v-if="item.is_xiao === 0 || item.is_xiao === 3" class="body-content3" @click="openPledge(item.order_sn)">购买未到账？</div>
        </div>
      </div>
    </van-list>
    <!--    未到账弹窗-->
    <van-popup v-model:show="isNotReachedAccountShow">
      <div class="notReachedAccount-box">
        <div class="notReachedAccount-title">私募未到账</div>
        <div class="notReachedAccount-title1">订单记录哈希值:</div>
        <input v-model="notReachedAccountValue" type="text" placeholder="输入哈希值校验">
        <div class="notReachedAccount-title3">
          <span class="inner-left">提示:</span>
          <span class="inner-right">打开钱包支付记录,复制哈希值输入框中校验支付状态</span>
        </div>
        <div class="notReachedAccount-btn" @click="onSubmitPledge">校验支付情况</div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isNotReachedAccountShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>

  </div>
</template>
<script setup>
import {ref} from 'vue';
import req from '@/libs/req';
import {showSuccessToast} from 'vant';
import {sliceDecimal} from '@/libs/utlis';

let pageNum = 1;
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const checkoutId = ref('');
const isNotReachedAccountShow = ref(false);
const notReachedAccountValue = ref('');

const onSubmitPledge = async () => {
  if (!notReachedAccountValue.value || !checkoutId.value) return showToast('未填写完整');

  const res = await req.post('Index/payment_callback2', {
    order_sn: checkoutId.value,
    txHash: notReachedAccountValue.value,
  });
  if (res.length === 0) {
    isNotReachedAccountShow.value = false;
    showSuccessToast('已提交，预计1-5分钟到账');
    checkoutId.value = '';
    notReachedAccountValue.value = ''
    list.value = [];
    pageNum = 1;
    await onLoad();
  }
};
// 点击立即解押
const openPledge = (id) => {
  isNotReachedAccountShow.value = true;
  checkoutId.value = id;
};
// 获取质押列表
const onLoad = async () => {
  const res = await req.post('Index/privateList', {
    page_no: pageNum,
    page_size: 10,
  });
  list.value.push(...res.list);
  pageNum++;
  // 加载状态结束
  loading.value = false;
  if (list.value.length >= res.count) {
    finished.value = true;
  }
};
</script>
<style scoped lang="scss">
.pledge-record {
  position: relative;
  min-height: 100vh;
  padding: 32px 15px 25px;

  .pledge-head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #F7AC15;
    margin-bottom: 7px;
    padding: 16px 15px;
    background-color: #212020;
    z-index: 9999;

    .head-head {
      margin-left: 9px;
    }

    .head-body {
      margin-left: 20px;
    }

    .head-foot {
      margin-right: 20px;
    }
  }

  .pledge-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;

    .body-content1 {
      font-size: 14px;
      color: #F6F6F6;
    }

    .body-content2 {
      display: flex;
      flex-direction: column;

      .content2-head {
        font-size: 14px;
        color: #F6F6F6;
      }

      .content2-body {
        position: relative;
        width: 100%;
        height: 4px;
        border-radius: 2px;
        background-color: #aaaaaa;
        margin: 2px 0;

        .body-inner {
          position: absolute;
          left: 0;
          top: 0;
          height: 4px;
          border-radius: 2px;
          background-color: #F7AC15;
        }
      }

      .content2-foot {
        font-size: 12px;
        color: #F7AC15;
        text-align: center;
      }
    }

    .body-content3 {
      font-size: 12px;
      color: #F7AC15;
      text-decoration: underline;
      //padding: 6px 10px;
      text-align: center;
      //background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
    }
  }


}

:deep(.van-popup--center) {
  background: #000000;
  border: 1px solid #13F6C4;
  border-radius: 10px;
}

.notReachedAccount-box {
  width: 90vw;
  position: relative;
  padding: 28px 23px 33px;
  font-size: 15px;
  color: #f6f6f6;

  svg {
    position: absolute;
    top: 12px;
    right: 15px;
  }

  .notReachedAccount-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 47px;
  }

  input {
    width: 100%;
    padding: 13px 12px;
    border: none;
    font-size: 12px;
    color: #ababab;
    background: #454545;
    border-radius: 5px;
    margin: 13px 0 19px;
  }

  .notReachedAccount-title3 {
    display: flex;
    font-size: 12px;
    color: #F7AC15;
    margin: 24px 0 30px;

    .inner-left {
      margin-right: 10px;
    }

    .inner-right {
      flex: 1;
    }
  }

  .notReachedAccount-btn {
    font-size: 17px;
    color: #000 !important;
    padding: 16px 0;
    text-align: center;
    background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
    border-radius: 30px;
    margin-bottom: 22px;
  }

  .notReachedAccount-tip {
    font-size: 12px;
    color: #F7AC15;
    text-align: center;
  }

}
</style>
